<template>
  <div>
    <!-- 区域管理 -->
    <el-row class="header">
      <el-col :span="24">
        <span>区域搜索</span>
        <el-input v-model="query.name" placeholder="请输入区域名称" style="width:220px" />
        <el-button type="primary" icon="el-icon-search" @click="cha">查询</el-button>
      </el-col>
    </el-row>
    <el-button class="XinJian" type="primary" icon="el-icon-circle-plus-outline" @click="zeng('add')">新建</el-button>
    <!-- <QuYul v-model="mum" :dialog-form-visible.sync="dialogFormVisible" :mm="mm" :form-visible.sync="formVisible" /> -->
    <!-- 绚烂区域 -->
    <el-table
      class="style"
      :data="tableData"
    >
      <el-table-column
        prop="date"
        label="序号"
        width="80"
        type="index"
        :index="hIndex"
      />
      <el-table-column
        prop="name"
        label="区域名称"
        width="300"
      />
      <el-table-column
        prop="nodeCount"
        label="点位数"
        width="300"
      />
      <el-table-column
        prop="remark"
        label="备注说明"
        width="400"
      />
      <el-table-column
        prop=""
        label="操作"
        width="200"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="xiangqing(row)">查看详情</el-button>
          <el-button type="text" size="small" @click="zeng('cdd', row)">修改</el-button>
          <!-- <el-button type="text" size="small" style="color: red" @click="del(row.id)">删除</el-button> -->
          <el-button
            class="shan"
            type="text"
            size="small"

            plain
            @click="del(row.id)"
          >
            删除
          </el-button>

        </template></el-table-column>
    </el-table>
    <!-- <el-pagination
      :current-page="query.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <el-dialog title="收货地址" :visible="dialogFormVisible" @close="clo">
      <div class="div">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="区域名称" prop="regionName">
            <el-input v-model="form.regionName" class="yi" autocomplete="off" placeholder="请输入" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item label="备注说明" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="4" class="er" autocomplete="off" maxlength="40" show-word-limit placeholder="请输入备注(不超过40字)" />
          </el-form-item>
          <el-form-item>
            <!-- <div slot="footer" class="dialog-footer"> -->
            <el-button class="it" @click="dia">取 消</el-button>
            <el-button class="em" type="primary" @click="dialog">确 定</el-button>
            <!-- </div> -->
          </el-form-item>
        </el-form>

      </div>

    </el-dialog>
    <el-dialog title="区域详情" :visible="formVisible" class="el" @close="close">

      <el-row class="row">
        <el-col :span="24"><span class="pan">区域名称：</span><span>{{ out }}</span>

          <!-- </el-col> -->
        </el-col></el-row>
      <el-table
        :data="today"

        class="bao"
      >
        <el-table-column
          prop=""
          label="包含点位"
          width="100"
        />
        <el-table-column
          prop=""
          label="序号"
          width="180"
          type="index"
        />
        <el-table-column
          prop="name"
          label="点位名称"
          width="180"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
          width="180"
        />
      </el-table>
    </el-dialog>
    <div class="v">
      <el-button v-if="tableData.length/10 === 1 " type="primary" @click="xia">下一页</el-button>
      <el-button v-if="query.pageIndex !== 1" type="primary" @click="shang">上一页</el-button>
    </div>
  </div>
</template>

<script>
// import QuYul from './components/QuYul.vue'
import { QuYu, shanchu, quxiang } from '@/api/point'
import { xinzeng, xiu } from '@/api/point'
export default {
  name: 'Quyu',
  // components: {
  //   QuYul
  // },
  data() {
    return {
      out: '',
      today: [],
      form: {
        regionName: null,
        remark: null
      },
      mum: null,
      dialogFormVisible: false,
      tableData: [],
      num: null,
      // : {
      //   name: 'daad',
      //   nodeCount: 'awdad',
      //   remark: 'awdwad'
      // },nun
      mm: null,
      total: null,
      formVisible: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
        name: null
      },
      rules: {
        regionName: [{ required: true, message: '请输入姓名', trigger: 'blur' }, {
          min: 4, max: 10, message: '长度为4-10位'
        }],
        remark: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.indata()
  },

  methods: {
    hIndex(index) {
      this.query.pageIndex <= 0 ? this.query.pageIndex = 1 : this.query.pageIndex
      if (this.query.pageIndex !== 1) {
        index + 1 + ((this.query.pageIndex - 1) * this.query.pageSize)
        return index + 1 + ((this.query.pageIndex - 1) * this.query.pageSize)
      }
      return index + 1
    },
    xia() {
      this.query.pageIndex++
      this.indata()
    },
    shang() {
      this.query.pageIndex--
      this.indata()
    },
    clo() {
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
    },
    close() {
      // this.$emit('update:formVisible', false)
      this.formVisible = false
      // this.$refs.form.resetFields()
      this.mm = null
    },
    async xiangqing(type) {
      // this.mm = type
      // this.xia()
      // this.shang()
      this.out = type.name
      this.query.regionId = type.id
      // this.query.name = type.name
      const re = await quxiang(this.query)
      this.today = re.currentPageRecords
      // this.today
      this.formVisible = true
      // console.log(re)
      // this.nun = {
      //   name: this.mm.name,
      //   nodeCount: this.mm.nodeCount,
      //   remark: this.mm.remark
      // }
    },
    async del(type) {
      try {
        await shanchu(type)
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success',
          offset: 100
        })
        this.indata()
      } catch (error) {
        if (error.request.status === 500) {
          console.dir(error)
          this.$notify({
            title: '失败',
            message: '原始数据不能删除',
            type: 'warning',
            offset: 100
          })
        }
      }
    },
    async indata() {
      const dat = await QuYu(this.query)
      this.total = +dat.totalCount
      this.tableData = dat.currentPageRecords
      // console.log(dat)
    },
    async cha() {
      const num = await QuYu(this.query)
      console.log(num)
      this.tableData = num.currentPageRecords
    },
    zeng(type, id) {
      // console.log(row)
      // console.log(type)
      // console.log(id)

      // console.log(this.mm)

      this.dialogFormVisible = true
      if (type === 'cdd') {
        this.mm = id
        this.mum = type
        this.form = {
          regionName: id.name,
          remark: id.remark
        }
      } else {
        this.form = {
          regionName: '',
          remark: ''
        }
      }
      // if (this.mum === 'cdd') {
      //   // const re = await
      //   // const {}
      //   this.form = {
      //     regionName: id.regionName,
      //     remark: id.remark
      //   }
      //   this.dialogFormVisible = true
      // }
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.indata()
    },
    handleCurrentChange(val) {
      this.query.pageIndex = val
      this.indata()
    },
    // xiugai() {
    //   console.log(this.mm)
    //   this.form = {
    //     regionName: this.mm.name,
    //     remark: this.mm.remark
    //   }
    // },
    async  dialog() {
      try {
        if (this.mum === 'cdd') {
          this.form.id = this.mm.id
          await xiu(this.form)
          await this.$refs.form.validate()
          this.$refs.form.resetFields()
          // this.form.regionName = {
          //   regionName: '',
          //   remark: ''
          // }
          // Object.keys(this.form).forEach(item => this.form[item] = null)
          this.form.regionName = null
          this.form.remark = null
          // this.$parent.indata()
          // this.form = null
          // this.$emit('update:dialogFormVisible', false)
          this.dialogFormVisible = false
          this.indata()

        // this.$message.success('修改成功')
        } else {
          await this.$refs.form.validate()
          await xinzeng(this.form)

          // this.$parent.indata()
          // this.$emit('update:dialogFormVisible', false)
          this.dialogFormVisible = false
          this.indata()

          this.$refs.form.resetFields()
        }
      } catch (error) {
        console.log(error)
      }
    },
    dia() {
      // this.$emit('update:dialogFormVisible', false)
      // this.$refs.form.resetFields()
      // this.form.regionName = null
      // this.form.remark = null
      // this.form = null
      this.dialogFormVisible = false

      // this.mm = ''
    }

  }
}
</script>

<style scoped lang='scss'>
.div{
  width: 590px;
  // height: 138px;
  padding-left: 80px;
  .it{
    // margin: 0 auto;
    margin-left: 210px;
    margin-right: 10px;
  }
  .em{
    background-color: rgba(255, 137, 58);
    border: none;
  }
  .yi{
    width: 396px;
    height: 36px;
  }
  .er{
    width: 396px;
    height: 82px;
  }
}
.el{
  .row{ margin-left: 60px;
  font-weight: 700;
  color: rgba(144, 147, 153);
  .pan{
    margin-right: 30px;
  }
  }
  .bao{
    // margin-left: 50px;
    padding-left: 50px;
  }
  // .di{
  //   // margin-left: 100px;
  //   // margin: 10px 0 20px 100px;
  //   margin-left: 80px;
  //   // margin-top: 40px;
  //   margin-bottom: 30px;
  //   span{
  //     margin-left: 20px;
  //     margin-right: 40px;
  //   }
  // }
}
.style{
   margin-left: 17px;
   width: 100%
}
.header{
  color: rgba(143, 144, 147);
  height: 40px;
  margin-bottom: 40px;
  padding-left: 17px;
  margin-top: 20px;

}
.XinJian{
  background-color: rgba(255, 130, 54) ;
  border: none;
  margin-bottom: 20px;
  margin-left: 17px;
}
.shan{
  color: red;
  z-index: 999;
  border: none;
}
.v{
  // width: 500px;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 80px;
}
</style>
